<template>
    <Teleport to="body">
        <div class="mask" :style="{ zIndex: props.zIndex }">
            <div class="pop">
                <div class="title">{{ props.title }}</div>
                <slot></slot>
                <div class="btns">
                    <button @click="onCancel">取消</button>
                    <button @click="onSure">确定</button>
                </div>
            </div>
        </div>
    </Teleport>
</template>


<script lang="ts" setup>
const props = defineProps({
    title: String,
    zIndex: Number
});

const emit = defineEmits(["cancel", "sure"])

function onCancel() {
    emit("cancel")
}

function onSure() {
    emit("sure");
}


</script>

<style lang="less" scoped>
@import url("./index.less");
</style>